<template>
  <article class="rewardList phoneCSS">
    <ex-header title="我的奖励" class="reward-head"></ex-header>
    <main>
      <!-- , -->
      <scroller
        lock-x
        scrollbar-y
        height="-46"
        use-pullup
        use-pulldown
        @on-pullup-loading="loadMore"
        @on-pulldown-loading="refresh"
        
   
      :pulldown-config="{downContent: '下拉刷新', upContent: '释放后更新'}" :pullup-config="{upContent:'上拉加载更多', downContent: '释放后加载'}" 

        v-model="status"
        ref="scroller"
      >
        <flexbox orient="vertical" v-show="list.length > 0">
        <!-- <flexbox orient="vertical" v-show="test"> -->
          <flexbox-item class="item" v-for="item in list">
            <section class="act_Tit">
              <div class="tit_Txt">
                <span class="symbol"></span>
                <p>活动时间</p>
              </div>
              <div class="tit_Time">{{item.actTime}}</div>
            </section>
            <section class="cont">
              <div class="cont_Top">
                <div class="cont_Show">
                  <div class="top_Info">
                    <p>开奖时间</p>
                    <p>{{item.lotTime}}</p>
                  </div>
                  <div class="top_Info">
                    <p>奖励积分</p>
                    <p>YXT</p>
                  </div>
                </div>
              </div>
              <ul class="result_Cont">
                <li>
                  <p class="tit">
                    <span>·</span>开奖结果
                  </p>
                  <p class="result">{{item.result.replace(/\,/g,'、')}}</p>
                </li>
                <li>
                  <p class="tit">
                    <span>·</span>我的买入
                  </p>
                  <p class="result">{{item.buys[0].coin}}买入{{item.buys[0].money}}元</p>
                </li>
                <li>
                  <p class="tit">
                    <span>·</span>我的幸运生肖
                  </p>
                  <p class="result my">{{item.luckyZodiacs[0].zodiac.replace(/\,/g,'、')}}</p>
                </li>
                <li>
                  <p class="tit">
                    <span>·</span>我的幸运生肖奖励
                  </p>
                  <p class="result my">奖励{{item.awards[0].amount.toFixed(4)}}{{item.awards[0].coin}}</p>
                </li>
              </ul>
            </section>
          </flexbox-item>
        </flexbox>

        <div
          slot="pullup"
          v-show="list.length > 0"
          class="xs-plugin-pullup-container xs-plugin-pullup-up"
          style="position: absolute; width: 92%; height: 40px; bottom: -40px; text-align: center;"
        >
          <span v-show="status.pullupStatus === 'default'"></span>
          
          <span
            class="pullup-arrow"
            v-show="status.pullupStatus === 'down' || status.pullupStatus === 'up'"
            :class="{'rotate': status.pullupStatus === 'up'}"
          >↑</span>
          <span v-show="status.pullupStatus === 'loading'">
            <spinner type="ios-small"></spinner>
          </span>
        </div>

        <div class="empty" v-if="list.length == 0">
          <div class="emptyCont">
            <img :src="empty" alt>
            <p class="emptyTxt">暂无数据</p>
          </div>
        </div>
      </scroller>
    </main>
  </article>
</template>
<script>
import exHeader from "@/components/xheader/index";
import { Flexbox, FlexboxItem, Scroller, Spinner } from "vux";
import store from "@/store/index.js";
import { mapGetters } from "vuex";
import empty from "@/static/images/newYearActivities/emptyImg.png";
import {
  phoneEncrypt,
  keepPoint,
  changeLen,
  changeMoneyType
} from "@/utils/tools";
import { setTimeout } from "timers";

export default {
  name: "rewardList",
  components: { Scroller, exHeader, Flexbox, FlexboxItem, Spinner },
  data() {
    return {
      test:false,
      empty: empty,
      status: {
        pullupStatus: "default",
        pulldownStatus: "default"
      },
      pages: {
        page: 0,
        limit: 10
      },
      list: []
    };
  },
  created() {},
  mounted() {
    this.getList();
  },
  watch: {},
  computed: {
    ...mapGetters([
      "token",
      "actNoDetail", //场次详情
      "reward" //我的奖励
    ])
  },
  methods: {
    getList(type) {
      let params = {
        uid: this.token.user.uid,
        ...this.pages
      };
      store.dispatch("rewardFunc", params).then(rewards => {
        rewards.forEach(item => {
          var date = item.info.beginTime.split(" ")[0].split("-");
          var end = item.info.endTime.split(" ");
          item.actTime =
            date[1] +
            "月 " +
            date[2] +
            "日  " +
            item.info.beginTime.split(" ")[1].substring(0, 5) +
            "-" +
            end[1].substring(0, 5);
          var lottDate = item.info.lotteryTime.split(" ");
          var lottMonth = lottDate[0].split("-");

          item.lotTime =
            lottMonth[1] +
            "月" +
            lottMonth[2] +
            "日 " +
            lottDate[1].substring(0, 5);
        });
        if (type == "refresh") {
          this.list = rewards;
          this.$refs.scroller.donePulldown();
        } else {
          this.list = this.list.concat(rewards);
          this.$refs.scroller.donePullup();
          if (rewards && rewards.length < this.pages.limit) {
            //禁用上拉刷新，在没有更多数据时执行
            this.$refs.scroller.disablePullup();
          }
        }
      });
    },
    loadMore() {
      this.pages.page++;
      this.getList();
    },
    refresh() {
      this.$refs.scroller.enablePullup();
      this.pages.page = 0;
      this.getList("refresh");
    }
  }
};
</script>
<style lang="scss">
  .reward-head{
    .left-arrow{
      cursor: pointer;
    }
  }
</style>
<style lang="scss" scoped>
.rewardList {
  background-color: whitesmoke;
  main {
    width: 9.2rem;
    margin: 0 auto;
    .item {
      width: 100%;
      .act_Tit {
        display: flex;
        flex-direction: row;
        font-size: 0.2933rem;
        color: #333;
        font-weight: 600;
        margin-top: 0.4267rem;
        .tit_Txt {
          display: flex;
          flex-direction: row;
          align-items: center;
          line-height: 0.32rem;
          .symbol {
            display: inline-block;
            width: 0.1333rem;
            height: 0.32rem;
            background: #3977fe;
            margin-right: 0.1333rem;
          }
        }
        .tit_Time {
          margin-left: 0.4rem;
        }
      }
      .cont {
        width: 100%;
        background: #fff;
        box-shadow: 0px 4px 10px rgba(57, 119, 254, 0.2);
        -moz-box-shadow: 0px 4px 10px rgba(57, 119, 254, 0.2);
        -o-box-shadow: 0px 4px 10px rgba(57, 119, 254, 0.2);
        -ms-box-shadow: 0px 4px 10px rgba(57, 119, 254, 0.2);
        -webkit-box-shadow: 0px 4px 10px rgba(57, 119, 254, 0.2);
        border-radius: 0.0533rem;
        -webkit-border-radius: 0.0533rem;
        margin-top: 0.08rem;
        .cont_Top {
          width: 8.8rem;
          height: 1.6rem;
          background: #f5f5f5;
          font-size: 0.2933rem;
          display: inline-block;
          margin-top: 0.2133rem;
          margin-left: 0.2rem;
          color: #333;
          border-radius: 0.0533rem;
          -webkit-border-radius: 0.0533rem;
          .cont_Show {
            width: 100%;
            height: 100%;
            display: inline-block;
            margin: 0.32rem 0 0 0.48rem;
            .top_Info {
              display: flex;
              flex-direction: row;
              line-height: 0.54rem;
              p {
                &:nth-of-type(1) {
                  width: 1.4667rem;
                }
                &:nth-of-type(2) {
                  width: 7rem;
                  margin-left: 0.4rem;
                }
              }
            }
          }
        }
      }
      .result_Cont {
        width: 8.8rem;
        margin: 0.25rem auto 0.2rem auto;
        list-style: none;
        font-size: 0.32rem;
        color: #666;
        padding-bottom: 0.1333rem;
        li {
          overflow: hidden;
          line-height: 0.7rem;
          .tit {
            float: left;
            font-weight: normal;
            width: 3.2rem;
            span {
              font-size: 0.2667rem;
              margin-right: 0.1333rem;
            }
          }
          .result {
            float: right;
            width: 5.5rem;
            &.my {
              color: #333;
            }
          }
        }
      }
    }
    .empty {
      width: 100%;
      text-align: center;
      position: fixed;
      left: 0;
      top: 50%;
      margin-top: 6rem;
      transform: translateY(-50%);
      .emptyCont {
        img{
          width: 4.1867rem;
        }
      }
      .emptyTxt {
        color: #ccc;
        font-size: 0.3733rem;
        font-weight: 500;
        margin-top: 0.3733rem;
      }
    }
  }
}
</style>
